@width: 200px;
@border: 5px solid red;

.class {
  font: 20px/40px "微软雅黑";
  color: #fff;
  text-align: center;
  background: green;
  border: @border;
}

//混合的写法：把另一个选择器的名字放到这个样式里，这个样式就具有放入选择器的样式；
.box1 {
  width: @width;
  height: @width;
  .class;
}

.box2 {
  width: 300px;
  height: 300px;
  .class;
  .bg(red);
}

//混合带参数
.bg(@bg) {
  background: @bg;
}

.box3 {
  height: @width;
  .bg(blue);
}

//混合带参数,有默认值
.border(@w:10px) {
  border: @w solid green;
}

.box4 {
  height: @width;
  .border();
  .border(40px);
}

//混合带多个参数
.border2(@w:10px,@style:solid,@color:#000) {
  border: @w @style @color;
}

.box5 {
  height: @width;
  .border2();
  .border2(@w:30px);
  .border2(@style: dotted);
  .border2(@style: dotted);
  .border2(@w:20px,@style:dotted,@color:red);
}

//css3盒模型的阴影
.box-shadow(@x:5px,@y:5px, @area:5px,@color:#ccc) {
  -webkit-box-shadow: @x @y @area @color;
  -moz-box-shadow: @x @y @area @color;
  -ms-box-shadow: @x @y @area @color;
  -o-box-shadow: @x @y @area @color;
  box-shadow: @x @y @area @color;
}

.box6 {
  .box-shadow();
  height: 300px;
  width: 300px;
  background: red;
}